<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
		  <meta name="viewport" content="width=device-width, initial-scale=1">
		<!--stylesheet 不可省  样式表关系-->
		<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
  
  <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
	
		<title></title>

	</head>
	<body>
		
<div class="container" style="padding: 50px; background-color: #FFFFFF">
	<form class="form-horizontal"><!--表单分列用form-horizontal 表单分列12列 。不用。row-->
		<div id="" class="form-group"><!--form-group 分组-->
			<!--col-md-2 占用2列，control-label 行对齐->
			
			<!--col-md-10  占10列 要加div分栏列-->
			<label class="col-md-2 control-label" for="username">name</label>
			<div class="col-md-10">
				<input class="form-control" id="username" type="type" />
				<img src="../images/3.jpg" style="display: block; position: absolute;top: 0;right: 0;" />
			</div>
		</div>
		<div id="" class="form-group"  style="background-image: url();">
			<label for="username">psw</label>
			<input class="form-control" id="username" type="type" />
		</div>
		<div id="" class="form-group">
			<label for="username">file</label>
			<input  id="username" type="file" />
			<p class="help-block">提示信息</p>
		</div>
		<div id="" class="form-group">
			<label>性别</label>
			<!--radio 单选框样式 radio-inline 行对齐-->
			<div class="radio">
				<label class="radio-inline"><input type="radio">男</label>
				<label class="radio-inline"><input type="radio">nv</label>
			</div>
		</div>
		<div id="" class="form-group">
			<label class="col-md-2 control-label">爱好</label>
			<!--checkbox 复选框样式，checkbox-inline 行对齐-->
			<!--checkbox 分列是要省略 直接写占列样式-->
			<div class=" col-md-10 ">
				<label class="checkbox-inline"><input type="checkbox">shux</label>
				<label class="checkbox-inline"><input type="checkbox">yuwen</label>
			</div>
		</div>
		<div id="" class="form-group">
			<label>说明</label>
			<textarea class="form-control"></textarea>
		</div>
		<!--按钮class 类型-->
<button class="btn" type="button">提交</button>
<button type="button" class="btn btn-default">（默认样式）Default</button>
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<button type="button" class="btn btn-success">（成功）Success</button>
<button type="button" class="btn btn-info">（一般信息）Info</button>
<button type="button" class="btn btn-warning">（警告）Warning</button>
<button type="button" class="btn btn-danger">（危险）Danger</button>
<button type="button" class="btn btn-link">（链接）Link</button>
<!--尺寸-->
 <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
 <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
 <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
 <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
<!--激活的状态-->
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>	
	<!--禁用-->
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
	<!--col-md-offset-2 栅格系统的偏移    （偏2列）-->
	<div class="col-md-10 col-md-offset-2">
		<button class="btn" type="button">提交</button>
	</div>
	</form>
	
	
	
	
	
	<!--<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>-->
</div>
</div>
	</body>
</html>
